.<template>
  <Head>
    <Title>免费资产</Title>
  </Head>
  <PageHeader
    title="免费资产"
    subtitle="Courses"
    :image="`${$config.public.baseUrl}images/bg/home1/9.png`"/>
  <div class="course course--style1 padding-top padding-bottom">
    <div class="container">
      <div class="course__topbar">
<!--         <div
          class="course__topbar-left"
          data-aos="fade-right"
          data-aos-duration="800"
        >
          <select name="cars" class="form-select">
            <option selected value="">Filter By</option>
            <option value="content">UI/UX</option>
            <option value="web">Web Design</option>
            <option value="graphic">Graphic</option>
            <option value="seo">Social</option>
          </select>
        </div> -->
        <div
          class="course__topbar-right"
          data-aos="fade-left"
          data-aos-duration="800"
        >
          <ul class="nav nav-pills" id="pills-tab" role="tablist">
            <li v-for="(item, idx) in categoryList.slice(0, 9)" :key="idx" class="nav-item">
              <button
                class="tab-btn"
                :class="{ active: selectedCategory === item.categoryID }"
                @click="selectedCategory = item.categoryID"
              >
                {{ item.category }}
              </button>
            </li>
          </ul>
        </div>
      </div>

      <div class="course__wrapper" data-aos="fade-up" data-aos-duration="800">
        <div class="tab-content" id="pills-tabContent">
          <div
            class="tab-pane fade show active"
            id="pills-english"
            role="tabpanel"
            content
            aria-labelledby="pills-english-tab"
            tabindex="0"
          >
            <div class="row g-4">
              <div
                v-for="(item, index) in filteredCourses.slice(0, 10)"
                :key="index"
                class="col-lg-4 col-md-6"
              >
                <CourseCard :courseDetails="item" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="newsletter" data-aos="fade-up" data-aos-duration="800">
    <div class="container">
      <Newsletter />
    </div>
  </div>
</template>

<script>
import PageHeader from "@/components/partials/PageHeader.vue";
import CourseCard from "@/components/partials/CourseCard.vue";
import Newsletter from "@/components/partials/newsletters/Newsletter.vue";

export default {
  scrollToTop: true,
  components: { PageHeader, CourseCard, Newsletter },
  async setup() {
    const { axios } = fetchData();
    
    const coursesResponse = await axios.get('/courses.json')
    const courses = coursesResponse.data

    const categoryList = [
      ...new Set(courses.map((item) => item.categoryID)),
    ].map((categoryID) => {
      return {
        categoryID: categoryID,
        category: courses.find((item) => item.categoryID === categoryID)
          .category,
      };
    });

    return {
      courses,
      categoryList,
    };
  },
  data() {
    return {
      selectedCategory: "",
      filteredCourses: [],
    };
  },
  mounted() {
    if (this.categoryList && this.categoryList.length) {
      this.selectedCategory = this.categoryList[0].categoryID;
    }
  },
  watch: {
    selectedCategory(value) {
      this.filteredCourses = this.courses.filter(
        (course) => course.categoryID === value
      );
    },
  },
};
</script>

<style></style>